Kendi Web Sayfalar²n²z² Tasarlay²n!

 Tablolar ve Resimler
Web Okulu'nda derslerimiz h²zla ilerliyor. Bu ay HTML sayfalar²nda tablo olu■turmaya ve transparan GIF dosyalar²na de≡iniyoruz.

Tablolar, HTML sayfas²nda listeler ve ■ablonlar haz²rlamak d²■²nda, resimleri ve metinleri sayfa iτerisinde istenilen b÷lgelere yerle■tirmek ve bunun gibi bir τok alanda kullan²l²rlar. HTML 3.2 ile birlikte pek τok yeni ÷zelli≡e kavu■an ve daha g÷rsel hale getirilen tablolar konusunu iyi ÷≡renen bir webmaster, hayalgⁿcⁿ ile tasarlad²≡² "T▄M" sayfalar² tablolar yard²m² ile olu■turabilir.
<TR>,<TD>,<TH> ve bunlar² kapatma taglar²yla birlikte kullan²lan <TABLE...> tag'²n²n genel kullan²m² ■÷yledir:

<TABLE BORDER=X CELLPADDING=X CELLSPACING=X WIDTH=[% veya X] HEIGHT=[% veya X] BGCOLOR=X BACKGROUND="X">

BORDER de≡i■kenine verilecek 0 veya daha ⁿstⁿ bir de≡er tablonun kal²nl²≡²n² belirler. CELLPADDING de≡i■kenine verilebilecek herhangi bir say², tablonun s²n²rlar² ile tablo iτeri≡i aras²ndaki mesafeyi, CELLSPACING ise hⁿcreler aras²ndaki mesafeyi belirler.
WIDTH ve HEIGHT de≡i■kenleri bir yⁿzde de≡eri veya bir say² olabilir. WIDTH=590 de≡eri verildi≡inde 640*480 τ÷zⁿnⁿrlⁿkte ekran²n tⁿm geni■li≡ini kaplayacak bir tablo olu■turulur. WIDTH=%50 de≡erini verildi≡inizde ise Web taray²c²n²z o tablonun her zaman ekran geni■li≡inin yar²s²n² kaplamas²n² sa≡lar.
<TABLE> tag'²n²n iτerisinde kullan²lan BGCOLOR de≡i■keni tablonun fon rengini tayin eder. X de≡eri geτen aylarda de≡indi≡imiz HEX kodlar²ndan (#FFFF00) veya renk isimlerinden (white, olive...) biri olmal²d²r. Tablonuz daha canl² ve profesyonel g÷rⁿnsⁿn istiyorsan²z, arka fonuna bir GIF veya JPG resmini de BACKGROUND ekini kullanarak d÷■etebilirsiniz.
Gelelim tablonun olu■turulmas²na. Genel prensip ■udur: <TABLE> tag'²yla tabloya ba■lad²ktan sonra her sat²r² olu■turmak iτin <TR>, her sⁿtunu olu■turmak iτin ise <TD> tag'²n² kullanmal²s²n²z. Aman bu taglar² kullan²yorsan²z her sat²r²n sonuna </TR> ve her sⁿtunun sonuna </TD> tag'lar²n²n koymay² unutmay²n!
Bir di≡er durum da, herhangi bir hⁿcrenin yan²ndaki iki ya da daha τok hⁿcreyi enine ya da boyuna do≡ru iτine almas²d²r ki bu i■lemi yapmak iτin <TD [COLSPAN=X, ROWSPAN=X]> veya <TR [COLSPAN=X, ROWSPAN=X]> ekleri kullan²l²r. ╓rne≡in 2 sat²r ve 2 sⁿtunlu 1.tablonun olu■turulmas² iτin a■a≡²daki kodlara ihtiyaτ vard²r, bu kodlar ayn² zamanda COLSPAN ve ROWSPAN eklerini de anlatmaktad²r.

<TABLE BORDER=1 CELLSPACING=2 CELLPADDING=3>
<!---Bu kodlarla, τerτeve kal²nl²≡² 1, hⁿcreler aras² bo■lu≡u 2, hⁿcre ile yaz² aral²≡² 3 olan yeni bir tablo olu■turuyoruz.--->
<TR><TH COLSPAN=2> <!---iki kolonu iτine alacak, yaz²lar kal²n olacak ve ortalanacak (yani ba■l²k olacak) --->

Tablo ╓rne≡i:

</TR></TD><TR><TD>
deneme1
</TD><TD> <!-- yeni bir kolona ba■l²yoruz... -->
deneme2
</TR></TD><TR><TD>
deneme3
</TD><TD> <!-- yeni bir kolona ba■l²yoruz... -->
deneme4
</TD></TR></TABLE> <!-- tⁿm tag'lar² kapat²p tabloyu sonland²r²yoruz. -->

E≡er renkli tablolar elde etmek isteseydik <TABLE .... ifadesinin yan²na BGCOLOR="#FFFF80", <TD.. ifadesinin yan²na ise BGCOLOR="#000080" eklerini girmeniz gerekecekti. Tablolar hakk²nda daha τok bilgi edinmek istiyorsan²z PC World Online'daki "Web Programc²s²n²n El Kitab²" b÷lⁿmⁿne bakabilirsiniz. Adresi: http://www.pcworld.com.tr/rehber/webprog.htm. ▌lerki aylarda tablolar hakk²nda gⁿzel pⁿf noktalar² ve daha τok bilgi bulacaks²n²z.

Sayfa ▌τinde Aτ²klama Yapmak
Her programlama dilinde programc²n²n hat²rlatma veya aτ²klama yapabilmesi iτin gerekli bir komut vard²r, HTML standartlar²n² koyanlar bunu da unutmam²■ ve HTML sayfalar²na aτ²klama koyabilmek iτin bir yol bulmu■lar. Bir sayfaya aτ²klama koymak ya da belirli bir aral²kta kalan HTML kodlar²n² geτici olarak iptal etmek iτin ⁿnlem i■areti kullan²l²r. A■a≡²daki ilk sat²r bir aτ²klama sat²r²d²r ve HTML dokⁿman² iτerisinde g÷rⁿnmeyecektir, ikinci sat²r ise bir komutu iptal etmek iτin kullan²lm²■t²r.

<!-- Bu bir aτ²klama sat²r²d²r -->
<!-------- <b>Kal²n yaz²...</b> ------>


Transparan GIF'ler
Internet ⁿzerinde gezinirken, resimlerin arka plan ve arka renkler ile uyum iτinde oldu≡unu, resmin kare olmas²na ra≡men arka plan²n resmin bo■luklar²ndan g÷rⁿnebildi≡ine ■ahit olursunuz. E≡er web sayfan²zda bir resim kullan²yor ve resmin bo■ taraflar²ndan arkaplan²n g÷rⁿnmemesinden ve resmin sayfa ⁿzerinde yama gibi g÷rⁿnmesinden yak²n²yorsan²z bu b÷lⁿmⁿ dikkatle okuyun.

Bu b÷lⁿmde resmi transparan hale getirirken en τok kullan²lan shareware grafik edit÷rlerinden biri olan Paint Shop Pro'nun 3.12 sⁿrⁿmⁿnⁿ kullanaca≡²z. PSP 4.0 sahipleri de yapt²klar²m²z² aynen kendi programlar²nda uygulayabilirler. ╓ncelikle Paint Shop'u aτ²n ve transparan yapmak istedi≡iniz GIF dosyas²n² yⁿkleyin, unutmay²n transparan dosyalar sadece GIF format²nda ve 256 renkte olabilirler.
"Select" araτ kutusundan a■a≡²daki resimde de seτili olan "Color Picker"² seτin ve resim ⁿzerinde transparan yapmak istedi≡iniz, yani yaprak ve dⁿnyan²n d²■²nda kalan alan²n ⁿzerine g÷tⁿrⁿn. Fareyi bu b÷lgeden ay²rmadan durum τubu≡unun (Image 150 x.... yazan τubuk) sa≡ b÷lmesinde I: de≡erinin yan²ndaki de≡eri (yani 215'i) akl²n²z²n bir kenar²na kaydedin.

"File" menⁿsⁿnden "Save As..." komutunu τal²■t²r²n ve format olarak GIF89a - Interlaced'i seτin. Diyalog kutusunun sa≡ taraf²nda bulunan Options butonuna bast²≡²n²zda GIF Transparency Options Diyalog kutusu kar■²n²za gelecektir. Bu kutucukta "Set Transparency Value to:" seτene≡ini i■aretleyip kar■²s²ndaki metin kutusuna "I:"n²n kar■²s²nda okudu≡unuz de≡eri (yani yaln²z bu resim iτin 215'i) yazarsan²z GIF dosyas²n²n
renk seτici ile seτti≡iniz rengi transparan olacak b÷ylece arkaplanlar bu b÷lgeden g÷rⁿlebilecektir. Resimler her zaman ba■ar²l² olarak transparan yap²lamazlar, bunun sebebi bazen resmin istemedi≡iniz alanlar²nda transparan yapt²≡²n²z renge ait parτac²klar²n kalmas²d²r. Bunu ÷nlemek iτin resmi yⁿksek renge getirdikten sonra resim ile alakas² olmayan bir renk seτip transparan yapmak istedi≡iniz alan² bu renk ile boyamal² ve resmi tekrar 256 renge getirerek bu rengin indeksini okuyup transparan hale getirmelisiniz. Bir transparan GIF'in hikayesi k²saca b÷yle, "Benim i■im gⁿcⁿm var, bu kadar i■le u≡ra■amam" diyorsan²z, Internet ⁿzerinde yⁿzlerce GIF d÷nⁿ■tⁿrme seti bulabilirsiniz, h²zl² olmalar²na ra≡men insan elinin yerini tutmaz ama olsun.

S▌H▌RL▌ B▌R TAG: <PLAINTEXT>
Ellerinizle haz²rlad²≡²n²z nadide bir web sayfas²na, uzunca bir paragraf eklemek istiyorsunuz diyelim.
Fakat paragraf² formatlaman²z τok uzun zaman alacakt²r; ⁿstelik paragraf² HTML sayfan²za oldu≡u gibi koyarsan²z tⁿm paragraflar ve sekme karakterleri yok olacak. Geτen ay bahsetti≡imiz PRE tag'²n² kulland²≡²n²zda bu sefer ba■ka bir sⁿrprizle kar■²la■acak ve geni■li≡i bir sayfadan fazla olan sat²rlar² ekranda g÷remeyeceksiniz. ▌■te bu a■amada bⁿtⁿn bunlar² ortadan kald²ran bir tag yard²ma ko■uyor.
Web taray²c²n²z sayfa iτerisinde <plaintext> tag'²n² g÷rdⁿ≡ⁿ anda </plintext>e kadar olan k²sm² not defterinde g÷rⁿnⁿyormu■ gibi g÷sterir. ▌ki tak² aras²nda kalan hiτ bir tag g÷z ÷nⁿne al²nmaz ve normal bir metinmi■ gibi i■lem g÷rⁿr.